<template>
  <el-container>
    <el-container>
      <el-main>
        <div class="function_box">
          <span>
            <el-button class="el-button--primary" @click="handleAdd">新增</el-button>
            <!--<el-button class="el-button&#45;&#45;primary">导入</el-button>-->
            <!--<el-button class="el-button&#45;&#45;primary">导出</el-button>-->
          </span>
          <span>
            <el-input v-model="search" style="width: 250px;margin-right: 5px" placeholder="请输入关键字" clearable></el-input>
            <el-button class="el-button--primary" @click="handleSearch">搜索</el-button>
          </span>
        </div>
        <!--表格区域--begin-->
        <el-table
            v-loading="loading"
            :data="tableData"
            border
            stripe
            style="width: 100%">
          <el-table-column
              show-overflow-tooltip
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="工号"
              sortable>
            <template slot-scope="scope">
              <el-tag effect="plain" type="info" disable-transitions>
                {{scope.row.id}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sex==='男'?'':'danger'" disable-transitions>
                {{scope.row.sex}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="birthday"
              label="出生日期">
            <template slot-scope="scope">
              <el-tag effect="plain" type="danger" disable-transitions>
                {{scope.row.birthday}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="joinDate"
              label="入职日期">
            <template slot-scope="scope">
              <el-tag effect="plain" type="warning" disable-transitions>
                {{scope.row.joinDate}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="eduSystem"
              label="身份">
            <template slot-scope="scope">
              <el-tag effect="dark" type="success" disable-transitions>
                {{scope.row.identity}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="medium" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm style="margin-left: 10px" title="确定删除吗？" @confirm="handleDelete(scope.row)">
                <el-button size="medium" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格区域--end-->
        <!--分页区域--begin-->
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
        <!--分页区域--end-->
        <!--弹窗区域--begin-->
        <el-dialog
            title="新增管理员"
            :visible.sync="dialogVisible"
            width="25%">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input style="width: 200px" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex" required>
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;" required></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="入职日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.joinDate" style="width: 100%;" required></el-date-picker>
              </el-col>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <!--弹窗区域--end-->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {addAdministrator, deleteAdministrator, selectAdministrator, updateAdministrator} from "@/api/administrator";

export default {
  name: "AdministratorManager",
  data(){
    return{
      tableData: [],
      search: '',
      total: 0,
      dialogVisible: false,
      form: {},
      pageSize: 10,
      currentPage: 1,
      loading: true,
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      selectAdministrator({pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.pageSizes = res.data.size;
        this.loading = false;
      })
    },
    handleEdit(row){
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      sessionStorage.setItem("user",JSON.stringify(this.form));
    },
    handleDelete(row){
      deleteAdministrator(row).then(res => {
        if (res.code===0){
          this.$message.success(res.message);
          this.load();
        }else {
          this.$message.error(res.message);
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      this.currentPage = pageNum;
      this.load();
    },
    handleSubmit(){
      if (this.form.name===undefined||
          this.form.sex===undefined||
          this.form.birthday===undefined||
          this.form.joinDate===undefined){
        this.$message.info("表单未填写完整");
        return;
      }
      if (this.form.id){//修改
        console.log("修改")
        updateAdministrator(this.form).then(res =>{
          if (res.code===0){
            this.$message.success(res.message);
            sessionStorage.setItem("user",JSON.stringify(this.form));
            this.load();
          }else {
            this.$message.error(res.message);
          }
        }).catch(res => {
          this.$message.error(res.code);
        })
      }else {//新增
        console.log("新增")
        addAdministrator(this.form).then(res =>{
          if (res.code===0){
            this.$message.success(res.message);
            this.load();
          }else {
            this.$message.error(res.message);
          }
        }).catch(res => {
          this.$message.error(res.code);
        })
      }
      this.dialogVisible = false;
    },
    handleAdd(){
      this.dialogVisible = true;
      this.form={};
    },
    handleSearch(){
      selectAdministrator({pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.pageSizes = res.data.size;
      })
    },
  }
}
</script>

<style lang="less" scoped>
.el-main{
  .function_box{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>